import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
import * as React from 'react'
import { useEffect, useRef, useState } from 'react'
import { Button, Input, Label, Select, SelectContent, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue } from 'v1-components'
import { useAtom } from 'jotai'
import { RocketIcon } from 'lucide-react'
import type { ISearchInput } from '../../../shared/types'
import { LLMModel } from '../../../shared/types'
import { UploadImageButton } from '../components/UploadImageButton'
import { questionAtom } from '@/store/question'
import { preloadRepl } from '@/components/Repl.lazy'
import { V1NavigationMenu } from '@/components/V1NavigationMenu'

function SearchPage() {
  const [, setQuestion] = useAtom(questionAtom)
  const navigate = useNavigate()

  const [model, setModel] = useState<LLMModel>(LLMModel.GPT4)

  useEffect(() => {
    preloadRepl()
  }, [])

  const search = (question: ISearchInput) => {
    setQuestion(question)
    navigate({ to: '/result' })
  }
  const inputRef = useRef<HTMLInputElement>(null)

  const submitTextSearch = () => {
    const input = inputRef.current?.value?.trim() ?? ''
    if (input !== '')
      search({ type: 'text', value: input, model })
  }

  const onEnter: React.DOMAttributes<HTMLInputElement>['onKeyPress'] = (e) => {
    if (e.code === 'Enter')
      submitTextSearch()
  }

  const submitImageSearch = (value: string, fileName: string): void => search({ type: 'image_url', value, fileName })

  return (
    <main className="p-0 m-0 w-full h-screen flex flex-col justify-center items-center">
      <V1NavigationMenu />
      <div className="min-w-[900px] flex flex-col justify-center flex-1">
        <Label className="w-full text-center text-4xl font-semibold text-[#303030]" htmlFor="website-description-input">Describe the web page you want</Label>
        <div className="flex mt-6 rounded-[10px] border-[1px] p-1">
          <Select value={model} onValueChange={setModel}>
            <SelectTrigger className="w-[150px] border-none focus-visible:ring-0 focus:ring-0">
              <SelectValue />
            </SelectTrigger>

            <SelectContent>
              <SelectScrollUpButton />

              <SelectItem value={LLMModel.GPT4}>{LLMModel.GPT4}</SelectItem>
              <SelectItem value={LLMModel.Claude3}>{LLMModel.Claude3}</SelectItem>

              <SelectScrollDownButton />
            </SelectContent>
          </Select>
          <Input
            className="focus-visible:ring-0 pl-[30px] border-none mx-2"
            id="website-description-input"
            placeholder="e.g. Write a landing page for a website that sells shoes"
            ref={inputRef}
            onKeyPress={onEnter}
          />
          <UploadImageButton onUpload={submitImageSearch} />
          <Button
            className="text-xl p-2 bg-transparent hover:bg-[#88888820] text-[#303030] focus-visible:ring-0"
            onClick={() => submitTextSearch()}
          >
            <RocketIcon />
          </Button>
        </div>
      </div>
    </main>
  )
}

export const Route = createLazyFileRoute('/')({
  component: SearchPage,
})
